<template>
  <el-select
    v-if="!pIdKey"
    :disabled="loading"
    v-nulltext
    v-model="page.ddlvalue"
    :style="`width:${width}`"
    v-bind="$attrs"
    v-on="$listeners"
    @change="onChange"
  >
    <template v-for="item in data">
      <el-option
        :key="item[idKey]"
        :value="item[idKey]"
        :label="item[nameKey]"
        :disabled="item[disabledKey]"
      ></el-option>
    </template>
  </el-select>
  <el-cascader
    v-else-if="cascader"
    :disabled="loading"
    v-nulltext
    :props="{ ...$attrs }"
    :options="options"
    v-model="page.ddlvalue"
    :style="`width:${width}`"
    v-bind="$attrs"
    v-on="$listeners"
    @change="onChange"
  ></el-cascader>
  <mei-select-tree
    v-else
    :disabled="loading"
    v-model="page.ddlvalue"
    :width="width"
    size=""
    v-bind="$attrs"
    v-on="$listeners"
    :data="data"
    :idKey="idKey"
    :pIdKey="pIdKey"
    :nameKey="nameKey"
    :disabledKey="disabledKey"
    @change="onChange"
  ></mei-select-tree>
</template>

<script>
import { AssetA1 } from "@/api";
import { isArray, isArrayEmpty } from "@/utils/validate";
export default {
  name: "meiselect",
  data() {
    return {
      page: {
        ddlvalue: this.ddlvalue
      }
    };
  },
  //外部属性
  props: {
    //数据源
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    //model
    ddlvalue: [String, Array, Number],
    idKey: {
      type: String,
      default: "value"
    }, //值字段
    nameKey: {
      type: String,
      default: "text"
    }, //显示字段
    pIdKey: "", //树上级ID字段
    disabledKey: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "100%"
    },
    cascader: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  model: {
    prop: "ddlvalue",
    event: "change"
  },
  //内部方法
  methods: {
    initPage() {},
    onChange(val) {
      const text = this.getSeleteText();
      //this.$emit("change", val, text);
    },
    setSelectIndex(index = 0) {
      let key = this.data[index][this.idKey];
      this.$nextTick(() => {
        this.page.ddlvalue = key;
      });
      return key;
    },
    getSeleteText() {
      if (!this.page.ddlvalue) return;
      if (isArray(this.page.ddlvalue)) {
        let key = this.data.filter(item => {
          return this.page.ddlvalue.includes(item[this.idKey]);
        });
        return key.map(item => {
          return item[this.nameKey];
        });
      } else {
        let key = this.data.find(item => {
          return item[this.idKey] == this.page.ddlvalue;
        });
        return key[this.nameKey];
      }
    }
  },
  //组件
  components: {},
  //初始化 异步加async await
  mounted() {
    this.initPage();
  },
  //计算属性
  computed: {
    options() {
      let _options = [];
      if (this.data.length == 0) {
        return [];
      }
      let { data, idKey, pIdKey, nameKey, disabledKey } = this;
      if (!pIdKey) {
        return this.data;
      }
      _options = JSON.parse(JSON.stringify(data));
      _options.forEach(item => {
        Object.assign(item, {
          value: item[idKey],
          label: item[nameKey],
          disabled: !!item[disabledKey]
        });
      });
      _options = _options.getChildren(idKey, pIdKey);
      return _options;
    }
  },
  //监视
  watch: {
    ddlvalue: {
      handler(val) {
        this.$nextTick(() => {
          this.page.ddlvalue = val;
        });
      },
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
</style>
